<template>
  <div id="cut">
    <div class="cutlist">
      <header>砍价列表</header>
      <div class="cut" v-for="(item,i) in cutList" :key="i">
        <div class="cut-left">
          <img v-bind:src="item.pic" alt />
        </div>
        <div class="cut-right">
          <p v-html="item.name"></p>
          <p v-html="item.characteristic"></p>
          <ul>
            <li>
              <span>￥{{item.minPrice}}</span>
              <p>低价</p>
            </li>
            <li>
              <span>￥{{item.originalPrice}}</span>
              <p>原价</p>
            </li>
            <li>
              <span>{{item.minScore}}</span>
              <p>限量</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["cutList"],
  data() {
    return {};
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style scoped lang="scss">
.cutlist {
  header {
    border-bottom: 0.01rem solid rgb(216, 216, 216);
    width: 100%;
    background: white;
    text-align: center;
    line-height: 0.8rem;
    font-size: 0.3rem;
    height: 0.8rem;
  }
  .cut {
    display: flex;
    padding: 0.2rem;
    height: 2.5rem;
    border-bottom: 0.01rem solid rgb(216, 216, 216);
    width: 100%;
    background: white;
    .cut-left {
      width: 30%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.1rem;
      }
    }
    .cut-right {
      p:nth-of-type(1) {
        width: 100%;
        height: 0.4rem;
        height: 0.4rem;
        line-height: 0.4rem;
      }
      p:nth-of-type(2) {
        width: 100%;
        font-size: 0.2rem;
        height: 0.5rem;
        line-height: 0.5rem;
        height: 0.2rem;
        color: gray;
        margin-bottom: 0.8rem;
      }

      ul {
        width: 70%;
        display: flex;
        justify-content: space-around;
        li {
          text-align: left;
          color: gray;
        }
        li:nth-of-type(1) {
          span {
            color: #ff0000;
          }
          p {
            color: black;
          }
        }
      }

      box-sizing: border-box;
      padding-left: 0.2rem;
      width: 70%;
    }
  }
}
</style>